<template>
    <div className="app-container">
        <div ref="gantt" className="left-container"/>
    </div>
</template>


<script>
import gantt from 'dhtmlx-gantt'  // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import {projectInfoApi} from "@/api/biddingProject";

export default {
    name: 'gantt',
    props:{
        tasks:{
            type:Array,
            default:[
                {
                    id: 1,
                    text: '占位数据',
                    start_date: '2020-04-08',
                    duration: 10,
                    open: true, //默认打开，
                    toolTipsTxt: 'xxxxxxxxxxxxxxxxx'
                }
            ]
        }
    },
    data() {
        return {
            dateArr:[]
        }
    },
    watch:{
      tasks(newVal) {
          console.log('----------------',newVal);
            if(newVal.length > 0){
                newVal.forEach(item=>{
                    this.dateArr.push(item.realStartTime);
                    this.dateArr.push(item.realEndTime);
                });
                let data = this.formatData(newVal);
                this.initData({data:data},this.dateArr);
            }
        },
    },
    methods: {
        // 最大值
        getDateMax(dataArr) {
            let max = dataArr[0];
            for (let i = 1; i < dataArr.length; i++) {
                if (Date.parse(dataArr[i]) > Date.parse(max)) {
                    max = dataArr[i]
                }
            }
            return max
        },
        // 最小值
        getDateMin(dataArr) {
            let min = dataArr[0];
            for (let i = 1; i < dataArr.length; i++) {
                if (Date.parse(dataArr[i]) < Date.parse(min)) {
                    min = dataArr[i]
                }
            }
            return min
        },
        formatData(data){
            if(data.length===0){
                return [
                    {
                        id: 1,
                        text: '占位数据',
                        start_date: '2020-04-08',
                        duration: 10,
                        open: true, //默认打开，
                        toolTipsTxt: 'xxxxxxxxxxxxxxxxx'
                    }
                ]
            }
            let arr = [];
            data.forEach((item,index)=>{
                arr.push({
                    id:(index + 1),
                    toolTipsTxt:'',
                    text:item.taskName,
                    start_date:item.realStartTime,
                    end_date:item.realEndTime,
                    duration:item.duration,
                    timeType:item.timeType,
                    open: true, //默认打开，
                });
            });
            return arr;
        },
        initData(tasks,dateArr){
            //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/"))
            gantt.config.start_date = new Date((this.getDateMin(dateArr) || '2020-04-08').replace(/-/,"/")) ;
            gantt.config.end_date = new Date((this.getDateMax(dateArr) || '2020-04-20').replace(/-/,"/")) ; //结束时间需要+1天

            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            gantt.config.autosize = true
            //只读模式
            gantt.config.readonly = true
            //是否显示左侧树表格
          gantt.config.show_grid = false
            
            //表格列设置
           /* gantt.config.columns = [
                {name: 'text', label: '阶段名字', tree: true, width: '120'},
                {
                    name: 'duration', label: '时长', align: 'center', template: function (obj) {
                        return obj.duration + '天'
                    }
                },
                {name:"start_date", label:"开始时间", align: "center" },

                {name:"end_date",   label:"结束时间",   align: "center" },
            ]*/

            //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
            gantt.config.show_task_cells = true

            //设置x轴日期
            gantt.config.scale_unit = 'day'
            gantt.config.step = 1
            gantt.config.date_scale = '星期' + '%D'

            //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
            gantt.config.fit_tasks = true
            // 在时间线上增加一行显示星期
            gantt.config.subscales = [
                //{unit:"day",  step:1, date:"星期"+"%D" },
                {unit: 'day', step: 1, date: '%M' + '%d' + '日'}
            ]
            //时间轴图表中，任务条形图的高度
            gantt.config.task_height = 28
            //时间轴图表中，甘特图的高度
            gantt.config.row_height = 36
            //从后端过来的数据格式化
            gantt.config.xml_date = '%Y-%m-%d'
            //任务条显示内容
            gantt.templates.task_text = function (start, end, task) {
                return task.text + '(' + task.duration + '天)'
            }
            // gantt.templates.task_class = function(start, end, task){return "xx";};
            //悬浮
            gantt.templates.tooltip_text = function (start, end, task) {
                //return "<b>任务名称:</b> "+task.text+"<br/><b>时长:</b> " + task.duration+"<br/><b>说明:</b>" +task.toolTipsTxt;
                return '<span style=\'font-size: 14px\'>' + task.toolTipsTxt + '</span>'
            }

            gantt.templates.scale_cell_class = function (date) {
                /*if(date.getDay()== 0 || date.getDay()== 6){
                  return "weekend";
                }*/
                return 'weekend'
            }
            //任务栏周末亮色
            /*gantt.templates.task_cell_class = function(item,date){
              if(date.getDay()== 0 || date.getDay()== 6){
                return "weekend";
              }
            };*/
            //任务条上的文字大小 以及取消border自带样式
            gantt.templates.task_class = function (start, end, item) {
                return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
          }
            // 设置成中文
            
            gantt.i18n.setLocale('cn')
            // 初始化
            gantt.init(this.$refs.gantt)
            // 数据解析
          gantt.parse(tasks)
            
        }
    },
}
</script>
<style lang="scss" scoped>
.firstLevelTask {
  border: none;

  .gantt_task_content {
    // font-weight: bold;
    font-size: 13px;
  }
}

.secondLevelTask {
  border: none;
}

.thirdLevelTask {
  border: 2px solid #da645d;
  color: #da645d;
  background: #da645d;
}

.milestone-default {
  border: none;
  background: rgba(0, 0, 0, 0.45);
}

.milestone-unfinished {
  border: none;
  background: #5692f0;
}

.milestone-finished {
  border: none;
  background: #84bd54;
}

.milestone-canceled {
  border: none;
  background: #da645d;
}

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 900px;

  .left-container {
    height: 100%;
  }
}

.left-container {
  height: 600px;
}

.gantt_scale_line {
  border-top: 0;
}

.weekend {
  //background:#f4f7f4!important;
  color: #000000 !important;
}

.gantt_selected .weekend {
  background: #f7eb91 !important;;
}

.gantt_task_content {
  text-align: left;
  padding-left: 10px;
}


.gantt_task .gantt_task_scale .gantt_scale_cell {
  line-height: 30px !important;
  height: 28px !important;
}

.gantt_grid_scale {
  line-height: 48px !important;
}
.gantt_task_scale,.gantt_grid_scale {
  height: 48px !important;
}
</style>
